<template>
  <t-layout-page class="geocoding">
    <div id="container"></div>
    <div class="input-card">
      <label>行政区选择</label>
      <div class="input-item">
        <span class="input-item-text">省市区</span>
        <el-cascader
          style="width:100%;"
          placeholder="请选择省市区"
          filterable
          clearable
          :options="regionData"
          v-model="selectedOptions"
          @change="handleQuery"
        />
      </div>
    </div>
  </t-layout-page>
</template>
<script>
import { regionData, codeToText } from 'element-china-area-data'
export default {
  name: 'Geocoding',
  data() {
    return {
      regionData,
      // selectedOptions: ['44', '4401', '440111'],
      lnglat: '', // 经纬度
      selectedOptions: [],
      radius: null, // 半径
      map: null,
      circles: [
        [113.246954, 23.116108],
        [113.243571, 23.140162],
        [113.234371, 23.093856],
        [113.218418, 23.122092],
        [113.262682, 23.092498],
        [113.290436, 23.141155],
        [113.236339, 23.069672],
        [113.267308, 23.164173],
        [113.201731, 23.151311],
        [113.205066, 23.077405],
        [113.260149, 23.055468],
        [113.314916, 23.086251],
        [113.336987, 23.131935],
        [113.26602, 23.205536],
        [113.307413, 22.960227],
        [113.51546, 23.082085],
        [113.822999, 23.284189]
      ],
    }
  },
  mounted() {
    //调用地图初始化方法
    this.initAMap()
  },
  methods: {
    initAMap() {
      this.map = new AMap.Map('container', {
        resizeEnable: true,
        zoom: 15,
        center: [113.276517, 23.151382]
      });
      // for (let i = 0; i < this.circles.length; i += 1) {
      //   let center = this.circles[i]
      //   let circle = new AMap.Circle({
      //     center: center,
      //     // radius: this.radius - 0,  // 半径
      //     radius: 1250,  // 半径
      //     // strokeColor: "#F33",  // 线颜色
      //     strokeColor: this.rgb(),  // 线颜色
      //     strokeOpacity: 1,  //线透明度
      //     strokeWeight: 3,  //线粗细度
      //     fillColor: "#7c7cfb",  //填充颜色
      //     fillOpacity: 0.35 //填充透明度
      //   })
      //   circle.setMap(this.map)
      //   // this.map.add(circle)
      //   // this.map.setFitView()
      // }
    },
    // rgb颜色随机
    rgb() {
      const r = Math.floor(Math.random() * 256);
      const g = Math.floor(Math.random() * 256);
      const b = Math.floor(Math.random() * 256);
      return `rgb(${r},${g},${b})`;
    },
    async handleQuery() {
      // if (!(this.selectedOptions.length > 0)) {
      //   this.$message.error('请先选择定位区域！')
      //   return
      // }
      // if (!this.radius) {
      //   this.$message.error('请输入圆形半径！')
      //   return
      // }
      console.log('区域码', this.selectedOptions)
      console.log('区域码转汉字', codeToText[this.selectedOptions[0]] + codeToText[this.selectedOptions[1]] + codeToText[this.selectedOptions[2]])
      this.map.clearMap()
      // const address = codeToText[this.selectedOptions[0]] + codeToText[this.selectedOptions[1]] + codeToText[this.selectedOptions[2]]
      // address && this.geoCode(address)
      let keyword;
      if (this.selectedOptions.length > 0) {
        keyword = this.selectedOptions[this.selectedOptions.length - 1]
      }
      // 创建行政区查询对象
      let district = new AMap.DistrictSearch({
        // 返回行政区边界坐标等具体信息
        extensions: 'all',
        // 设置查询行政区级别为 区
        level: 'district'
      })
      district.search(keyword, (status, result) => {
        // 获取边界信息
        let bounds = result.districtList[0].boundaries
        let polygons = []
        if (bounds) {
          for (let i = 0, l = bounds.length; i < l; i++) {
            //生成行政区划polygon
            let polygon = new AMap.Polygon({
              map: this.map,
              strokeWeight: 1,
              path: bounds[i],
              fillOpacity: 0.7,
              fillColor: '#CCF3FF',
              strokeColor: '#CC66CC'
            })
            polygons.push(polygon)
          }
          // 地图自适应
          this.map.setFitView()
        }
      })
    },
    // 地理编码，根据地址获取经纬度坐标
    geoCode(address) {
      let geocoder = new AMap.Geocoder({
        city: "010", //城市设为北京，默认：“全国”
      });
      var marker = new AMap.Marker();
      geocoder.getLocation(address, (status, result) => {
        if (status === 'complete' && result.geocodes.length) {
          let lnglat = result.geocodes[0].location
          this.lnglat = lnglat.lng + ',' + lnglat.lat;
          marker.setPosition(lnglat);
          this.map.add(marker);
          this.map.setFitView(marker);
        } else {
          this.$message.error('根据地址查询位置失败');
        }
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.geocoding {
  position: relative;
  #container {
    width: 100%;
    height: 100%;
  }
  .input-card {
    position: absolute;
    background-color: white;
    max-height: 90%;
    overflow-y: auto;
    top: 30px;
    left: 30px;
    padding: 10px;
    width: 400px;
    .input-item {
      margin: 10px 0;
      display: flex;
      align-items: center;
      .input-item-text {
        display: inline-block;
        width: 150px;
        text-align: right;
        padding-right: 10px;
      }
    }
  }
}
</style>
